<template>
	<div style="padding-top:50px;">
		<TopWithBack></TopWithBack>
    <div class="paytype_t">
      <div class="paytype_t_l">
          <img src="./../../assets/images/pay_top_icon.jpg" alt="" width="70%">
      </div>
      <div class="paytype_t_r">
          <p>￥{{orderdetails.orderfee}}</p>
          <p>感谢您的信任</p>
      </div>
    </div>
    <div class="index_divide"></div>
    <div class="paytype_con">
      <div class="paytype_con_l">
          <img src="./../../assets/images/weixin_icon.png" alt="" width="60%">
      </div>
      <div class="paytype_con_m">
          <span>微信支付</span>
          <p>推荐有微信账户的用户使用</p>
      </div>
      <div class="paytype_con_r">
          <input class="aui-radio" type="radio" name="demo1" v-model='paytype' value="WX">
      </div>
    </div>
   <!--  <div class="paytype_con">
      <div class="paytype_con_l">
          <img src="./../../assets/images/zhifubaoicon.png" alt="" width="60%">
      </div>
      <div class="paytype_con_m">
          <span>支付宝支付</span>
          <p>推荐有支付宝账户的用户使用</p>
      </div>
      <div class="paytype_con_r">
          <input class="aui-radio" type="radio" name="demo1" v-model='paytype' value="ALI">
      </div>
    </div> -->
    <div class="paytype_con">
      <div class="paytype_con_l">
          <img src="./../../assets/images/leftmoney_icon.png" alt="" width="60%">
      </div>
      <div class="paytype_con_m">
          <span>余额支付，账户余额：{{amount_info.amount}}元</span>
          <p>使用账户余额支付</p>
      </div>
      <div class="paytype_con_r">
          <input class="aui-radio" type="radio" name="demo1" v-model='paytype' value="AMT">
      </div>
    </div>
    <div class="paytype_con">
      <div class="paytype_con_l">
          <img src="./../../assets/images/ryb_icon.png" alt="" width="60%">
      </div>
      <div class="paytype_con_m">
          <span>金币支付，瑞雅币数量：{{amount_info.amount_coin}}</span>
          <p>使用账户金币支付</p>
      </div>
      <div class="paytype_con_r">
          <input class="aui-radio" type="radio" name="demo1"  v-model='paytype' value="RYB">
      </div>
    </div>
    <button class="recharge_btn" style="margin-top: 30px" @click="doPay">确认支付</button>
  </div>
</template>
<script>
import TopWithBack  from './../common/TopWithBack.vue'
import { getInfo } from'@/api/login'
import { orderDetalis, pay } from'@/api/allapis'
export default{
  name: 'PayType',
  data(){
    return{
      paytype:'WX',//支付类型
      amount_info:'',//账户信息
      member_info:'',//个人信息
      orderdetails:'',//订单详情信息
      id:''//订单id，根据订单id拉取订单信息
    }
  },
  components:{
  	TopWithBack,
  },
  methods:{
    //获取个人信息
    loadInfoMessage(){
      this.$vux.loading.show({ text: 'Loading' })
      getInfo().then(response=>{
        // console.log(JSON.stringify(response)  )
        this.member_info = response.data.member_info
        if(response.data.amount_info!==null){
          this.amount_info = response.data.amount_info
          this.$vux.loading.hide()
        }else{
          this.amount_info.amount='0.00'
          this.amount_info.amount_coin = '0.00'
        }
        this.datalist = response.data
        this.$vux.loading.hide()
      })
    },//获取个人信息
    loaddata(){
      orderDetalis(this.id).then(response=>{
        // console.log(JSON.stringify(response))
        this.orderdetails = response.data.order_info
      })
    },
    //结算
    doPay(){
      const self = this
      pay(self.id,self.paytype).then(response=>{
        self.$vux.toast.show({
          text: response.msg,
          type: 'success',
          time: 800,
          onHide:function(){
            self.$router.replace({
              name:'Orders'
            })
          }
        })
      })
      // console.log(this.paytype)
    },
  },
  created(){
    this.id = this.$route.params.id
    this.loadInfoMessage()//获取个人信息
    this.loaddata()//获取订单信息
  },
}
</script>
<style>

</style>



